<template>
	<view class="content">
		<view class="tab">
			<text :class="{ active: currentTab == 0 }" @click="selectTab(0)">今日日程</text>
			<text :class="{ active: currentTab == 1 }" @click="selectTab(1)">新订单</text>
		</view>
		<view class="swiper-container">
			<swiper
				class="swiper"
				:current="currentTab"
				:indicator-dots="indicatorDots"
				:autoplay="false"
				:interval="interval"
				:duration="500"
				style="min-height: 90vh;"
				@change="handleSwiperChange"
			>
				<swiper-item>
					<view class="swiper-item">
						<scroll-view class="col-time-container schedule" :scroll-y="true" :scroll-x="true" scroll-top="120" scroll-left="120">
							<view v-for="(item, index1) in schedule" :key="index1" class="col-time-container">
								<view v-if="item.IsWork == false" class="col-time mui-col-xs-3 col-time-gray">{{ item.ServeTime }}-{{ item.NextServeTime }}</view>
								<view v-else-if="item.IsOccupy == true" class="col-time mui-col-xs-3 col-time-red">{{ item.ServeTime }}-{{ item.NextServeTime }}</view>
								<view v-else class="col-time mui-col-xs-3">{{ item.ServeTime }}-{{ item.NextServeTime }}</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="no-order" v-if="orderlist.length === 0">暂无订单</view>
					<view v-else class="swiper-item-order">
						<view v-for="item in orderlist" :key="item.Id" class="order-item-card" @click="orderdetail(item.Id)">
							<view class="order-no-top">
								<view class="order-no">{{ item.OrderNo }}</view>
							</view>
							<view class="order-item-top">
								<view class="player-header"><view :style="{ backgroundImage: 'url( ' + item.CustomerImg + ' )' }" class="player-header-img"></view></view>
								<view class="play-order-info">
									<view class="play-order-info-item">
										<view class="title">预约门店</view>
										<view class="content">{{ item.StoreName }}</view>
									</view>
									<view class="play-order-info-item">
										<view class="title">预约时间</view>
										<view class="content">{{ item.StartTime | timeFormat('yyyy-mm-dd hh:mm') }}</view>
									</view>
									<view class="play-order-info-item">
										<view class="title">结束时间</view>
										<view class="content">{{ item.EndTime | timeFormat('yyyy-mm-dd hh:mm') }}</view>
									</view>
								</view>
							</view>
							<view class="order-price">
								<text class="order-price-unit">￥</text>
								<text>{{ item.Fee | moneyFormat(2) }}</text>
							</view>
							<view class="order-operation-container">
								<view class="order-btn jiedan-btn" @click.stop="updateOrderStatus(item.Id, 30)">接单</view>
								<view class="order-btn judan-btn" @click.stop="updateOrderStatus(item.Id, -20)">拒单</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
import { isLogin, toLogin, formatDate } from '@/config/common.js';
import { updatePlayerOrderStatus } from '@/constant/customer.js';
import { getSchedule, getServeNewPlayOrderList } from '@/constant/schedule.js';
export default {
	data() {
		return {
			currentTab: 0,
			orderlist: [],
			schedule: [],
			servePlayerId: uni.getStorageSync('customerId')
		};
	},
	created: function() {},
	onLoad: function(option) {
		if (isLogin()) {
			this.getSchedule();
			this.getOrderList();
		} else {
			toLogin();
		}
	},
	filters: {
		formatDate(_value) {
			return formatDate(new Date(_value), 'yyyy-MM-dd hh:mm');
		}
	},
	methods: {
		selectTab: function(index) {
			this.currentTab = index;
		},
		handleSwiperChange: function(event) {
			this.selectTab(event.detail.current);
		},
		//获取日程
		getSchedule: async function() {
			let result = await getSchedule({ servePlayerId: this.servePlayerId });
			this.schedule = result[0].ServePlayerTimeInfoList;
		},
		orderdetail: function(id) {
			uni.navigateTo({
				url: '../order/detail?orderId=' + id
			});
		},
		async getOrderList() {
			let orderList = await getServeNewPlayOrderList({ servePlayerId: this.servePlayerId });
			this.orderlist = orderList;
		},
		async updateOrderStatus(orderId, orderStatus) {
			let orderList = await updatePlayerOrderStatus({ orderId: orderId, playOrderStatus: orderStatus });
			uni.showToast({
				title: orderStatus == 30 ? '接单成功' : '拒单成功',
				icon: 'none'
			});
			setTimeout(() => {
				this.getOrderList();
			}, 1000);
		}
	}
};
</script>

<style>
@import url('../../../../css/common.css');
</style>
<style lang="scss" scoped>
.tab {
	text-align: center;
	color: #aeaeae;
	.active {
		border-bottom: 2rpx solid #fe7904;
		color: #fe7904;
	}
	padding-bottom: 10rpx;
}
.tab text {
	display: inline-block;
	padding: 10rpx 20rpx;
	font-size: 32rpx;
}

.no-order {
	height: 240rpx;
	line-height: 240rpx;
	text-align: center;
	background-color: #fff;
	color: #acacac;
}

.swiper-item-order {
	padding: 20rpx 30rpx;
}

.order-item-card {
	background-color: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	.order-no-top {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		color: $main-text-color-gray-33;
		.order-status {
			color: $main-text-color-main-orange;
		}
	}
	.order-item-top {
		display: flex;
		.player-header {
			width: 120rpx;
			margin-right: 20rpx;
			&-img {
				border-radius: 12rpx;
				width: 120rpx;
				height: 120rpx;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
		}

		.play-order-info {
			color: $main-text-color-gray-33;
			font-family: 'SourceHanSansCN-Regular';
			font-size: $main-text-size-28;

			&-item {
				margin-bottom: 16rpx;
				display: flex;
				.title {
					width: 140rpx;
					min-width: 140rpx;
					color: $main-text-color-gray-black;
				}
				.content {
					width: 100%;
					word-wrap: break-word;
				}
			}
		}
	}

	.order-price {
		color: $main-text-color-main-orange;
		font-size: $main-text-size-32;
		text-align: right;
		margin-bottom: 20rpx;
		&-unit {
			font-size: $main-text-size-20;
		}
	}

	.order-operation-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

.play-order-info-item .title::after {
	content: '：';
}

.schedule {
	display: flex;
	flex-wrap: wrap;
	.date-row .mui-col-xs-4 {
		text-align: center;
		height: 45px;
		line-height: 45px;
		border-bottom: 2rpx solid $main-line-color-gray-DE;
	}

	.mui-col-xs-3 {
		width: 10vw;
	}

	.date-cell {
		border-bottom: 1px solid #f34a37 !important;
		color: #f34a37 !important;
	}

	.col-time {
		width: 160rpx;
		border-radius: 5px;
		border: 2rpx solid $main-line-color-gray-DE;
		height: 25px;
		line-height: 25px;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.col-time-red {
		background-color: #f44235 !important;
		color: #ffffff;
	}

	.col-time-gray {
		background-color: #e2e2e2 !important;
	}

	.col-time-container {
		margin-left: 10rpx;
		margin-top: 10rpx;
		float: left;
	}
}
</style>
